
.side-container {
  @include font-color("color-text");
  position: fixed;
  top: 0;
  height: 100vh;
  width: $side-container-width;
  text-align: right;
  font-family: $sans-preferred-font-list;
  padding: 20px 0 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  $nav-item-hover-background-alpha: 0.02;
  $nav-item-hover-indicator-alpha: 0.6;
  $nav-item-hover-color-darken: 30%;
  $nav-item-active-background-alpha: 0.03;
  $nav-item-active-color-darken: 20%;

  .nav-head {
    padding: 30px 28px 30px 20px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s linear;
    //color: $deep-dark-accent;

    .nav-title {
      font-size: $nav-title-size;
      line-height: $nav-title-size * 1.4;
    }

    border-right: 2px solid transparent;

    .nav-subtitle {
      margin-top: 8px;
      font-size: $nav-subtitle-size;
    }

    &:hover {
      border-right: 2px solid rgba($color-accent, $nav-item-hover-indicator-alpha);
      background: rgba($color-accent, $nav-item-hover-background-alpha);
      //color: darken($color-accent, $nav-item-hover-color-darken);
    }

    &.active {
      border-right: 2px solid $color-accent;
      background: rgba($color-accent, $nav-item-active-background-alpha);
      //color: darken($color-accent, $nav-item-active-color-darken);
    }
  }

  .nav-link-list {
    flex-grow: 1;

    .nav-link-item {
      font-size: $nav-link-size;
      margin-bottom: 10px;
      border-right: 2px solid transparent;
      padding: 8px 28px 8px 30px;
      cursor: pointer;
      transition: all 0.2s linear;
      //color: $deep-dark-accent;

      .nav-link-subitem {
        font-size: $nav-link-size - 3px;

        li {
          list-style: none;
          padding-left: 2px;
        }

        a {
          text-decoration: none;
        }
      }

      &:hover {
        border-right: 2px solid rgba($color-accent, $nav-item-hover-indicator-alpha);
        background: rgba($color-accent, $nav-item-hover-background-alpha);
        //color: darken($color-accent, $nav-item-hover-color-darken);
      }

      &.active {
        border-right: 2px solid $color-accent;
        background: rgba($color-accent, $nav-item-active-background-alpha);
        //color: darken($color-accent, $nav-item-active-color-darken);
      }
    }
  }

  .nav-footer {
    padding: 20px 30px 0 20px;
    font-size: $nav-footer-size;

    a {
      color:$color-accent;
      &:hover {
        text-decoration: underline;
        text-underline-position: under;
        color: $color-accent;
      }
    }
  }

  @media screen and (max-width: $single-column-max-width) {
    display: none;
  }
}
